<script setup lang="ts">
import {onMounted, reactive} from "vue";
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router";
import Login from "@/business/service/account.service";
import { useOauthStore } from "@/stores/oauth";
const router = useRouter();

const loginForm = reactive({
  username: "",
  password: "",
});

onMounted(() => {
  window.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      submit();
    }
  });
});

const submit = async () => {
  const username = loginForm.username;
  const password = loginForm.password;
  if (username == null || username == "") {
    ElMessage.warning("请输入用户名");
    return;
  }
  if (password == null || password == "") {
    ElMessage.warning("请输入密码");
    return;
  }
  // const result = await Login(loginForm);
  // if (result.code === 200) {
    await useOauthStore().getUser({ username: username });
    router.replace("/home");
  // }
};
</script>

<template>
  <div id="login">
    <header>
      <span>Tarot系统</span>
    </header>
    <main>
      <div class="login-left">
        <div class="login-left-img"></div>
      </div>
      <div class="login-right">
        <div>
          <ul class="welcome">
            <li>欢迎回来</li>
          </ul>
          <ul>
            <li>
              <label>
                <el-icon ><User /></el-icon>
                <input v-model="loginForm.username" type="text" placeholder="请输入用户" />
              </label>
            </li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <label>
                <el-icon ><Lock /></el-icon>
                <input v-model="loginForm.password" type="password" placeholder="请输入密码" />
              </label>
            </li>
          </ul>
        </div>
        <div>
          <ul>
            <li>
              <button type="button" @click="submit">
                登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
              </button>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<style scoped>
#login {
  font-family: "Mona Sans", "Helvetica", "Arial", "Haas Grot Text R Web",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f8fafb;

  :focus-visible,:focus{
    outline: none !important;
  }

  button, input, select, textarea {
    border: none;
    outline: none;
    box-shadow: none;
  }
  li {
    list-style: none;
  }

  & > header {
    position: absolute;
    width: 100%;
    height: 100px;
    line-height: 100px;
    & > span {
      font-size: 30px;
      font-weight: bold;
      color: #37a0f4ff;
      margin-left: 10vh;
      position: relative;
      top: 1vh;
    }
  }

  & > main {
    width: 100%;
    height: calc(100% - 30vh);
    margin-top: 100px;
    padding-top: 3vh;
    display: flex;
    flex-direction: row;
    & > .login-left {
      width: 100%;
      display: flex;
      flex-direction: row;
      & > .login-left-img {
        width: 70%;
        height: 85%;
        margin-left: 25%;
        background-image: url("@/assets/images/login-left-bg.png");
        background-repeat: no-repeat;
        justify-content: center;
        align-items: center;
        background-size: 100% 100%;
      }
    }

    & > .login-right {
      color: #45b2ef;
      height: 60%;
      margin: 4% 10% 0 0;
      //background-color: #f1f5f6;
      //border: 1px solid #ebf0f3;
      box-shadow: 5px 5px 15px #9ed6f4;
      border-radius: 2vh 9vh;
      padding: 2vh;
      & > div {
        padding: 1vh;
        margin-top: 1vh;
        & > ul {
          display: flex;
          flex-direction: row;
          padding: 0;
          margin: 0;
          & > li {
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0.8vh 0;
            & > label > .el-icon {
              position: absolute;
              width: 2.5vh;
              height: 2.5vh;
              margin-top: 1vh;
              left: 1vh;
            }
            & > button {
              width: 32.5vh;
              height: 4vh;
              border: none;
              border-radius: 5vh;
              background-color: #45b2ef;
              color: white;
              &:hover {
                background-color: #155dee;
                cursor: pointer;
              }
            }
          }
          & > li:nth-child(1) {
            & > label {
              padding-bottom: 0.5vh;
              display: flex;
            }
            & > label > input {
              width: 28vh;
              height: 4vh;
              border: 1px solid #dfe6ea;
              padding-left: 4.3vh;
              border-radius: 5vh;
              &:hover {
                border: 1px solid #45b2ef;
              }
              &::placeholder {
                color: #bcbbbb;
              }
            }
          }
        }
        & .welcome {
          font-size: 3vh;
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-bottom: 3vh;
        }
      }
    }
  }
}
</style>
